<template>
	<view class="lee-wrap">
		<!-- <view class="lee-menu-wrap"> -->
		<scroll-view scroll-y scroll-with-animation class="lee-tab-view menu-scroll-view bf5" :scroll-top="scrollTop"
			:scroll-into-view="itemId">
			<view v-for="(item,index) in typeList" :key="index" class="lee-tab-item"
				:class="[current == index ? 'lee-tab-item-active' : '']"
				:style="{color:current==index?'#000':'',fontWeight:current==index?'bold':''}"
				@click.stop="swichMenu(index)">
				<text class="u-line-1">{{item.label}}</text>
			</view>
		</scroll-view>
		<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
			@scrolltolower="scrolltolower" :refresher-triggered="triggered">
			<view class="page-view">
				<view class="class-item" :id="'item' + index" v-for="(item1 , index) in list" :key="index">
					<view class="card c3 mb10 cshow">
						<view class="content">
							<image :src="site.siteimgroot + item1.image_list[0]" class="image" lazy-load></image>
							<view class="content_right">
								<view class="content-name">{{item1.product_name}}</view>
								<div class="content-text" style="font-size: 30rpx;font-weight: 600;">#{{ item1.id }}
								</div>
								<view class="content-text"
									v-if="item1.dy_product_id != '' && item1.dy_product_id != null">
									商品ID：{{item1.dy_product_id}}</view>
								<view class="content-text"
									v-if="item1.tuan_dy_product_id != '' && item1.tuan_dy_product_id != null">
									团购ID：{{item1.tuan_dy_product_id}}</view>
							</view>
						</view>
						<view class="sold_start_time">售卖时间：{{item1.sold_start_time}} 至 {{item1.sold_end_time}}</view>
						<view class="info">
							<view class="price">
								价格：
								<view class="actual_amount">￥{{item1.sku.actual_amount}}</view>
								<view class="origin_amount">￥{{item1.sku.origin_amount}}</view>
							</view>
							<view class="sales_volume">售卖数量：
								<view class="sales_num">{{item1.sales_volume}}</view>
							</view>
						</view>
						<view class="stutasBox">
							<view class="product_spec">
								配送方式：
								<u-tag class="ml10" plain size="mini" v-for="(value, i) in item1.delivery_method"
									:key="i" :text="value == '1' ? '立即配送' : '先囤后约'"></u-tag>
							</view>
							<view class="product_spec">商品规格：
								<u-tag text="套餐商品" type="success" v-if="item1.product_spec == 0" plain
									size="mini"></u-tag>
								<u-tag text="单商品" type="warning" v-if="item1.product_spec == 1" plain
									size="mini"></u-tag>
							</view>
						</view>
						<view class="product_spec">
							上下架状态：
							<u-tag text="上架中" type="success" v-if="item1.sj_status == 1" plain size="mini"></u-tag>
							<u-tag text="下架中" type="warning" v-if="item1.sj_status == 2" plain size="mini"></u-tag>
						</view>
						<view class="product_spec">
							审核状态(抖音)：
							<u-tag v-if="item1.sync_status != 0" :type="sync_statusList[item1.sync_status].type"
								:text="sync_statusList[item1.sync_status].name"  plain size="mini"></u-tag>
							<!-- <u-tag text="审核失败" type="warning" v-if="item1.sync_status == 99" plain size="mini"></u-tag>
							<u-tag text="审核中" type="warning" v-else-if="item1.sync_status == 98" plain
								size="mini"></u-tag>
							<u-tag v-else-if="item1.sync_status != 0" :type="sync_statusList[item1.sync_status].type"
								:text="sync_statusList[item1.sync_status].name" plain size="mini"></u-tag> -->
							<view class="box" style="margin-left: 40rpx;" @click="tipsShowTap(item1.sync_error_text)"
								v-if="item1.sync_status == 3">
								<uni-icons type="chat" size="25" color="red"></uni-icons>
							</view>
						</view>
						<view class="product_spec" v-if="item1.audit != null">
							审核状态(平台)：
							<u-tag text="审核失败" type="warning" v-if="item1.audit && item1.audit.status == 3" plain
								size="mini"></u-tag>
							<u-tag text="审核中" type="warning" v-else-if="item1.audit && item1.audit.status == 1" plain
								size="mini"></u-tag>
							<u-tag text="审核通过" type="success" v-else-if="item1.audit && item1.audit.status == 2" plain
								size="mini"></u-tag>
							<view class="box" style="margin-left: 40rpx;" @click="tipsShowTapping(item1.audit.reason)"
								v-if="item1.audit && item1.audit.status == 3">
								<uni-icons type="chat" size="25" color="red"></uni-icons>
							</view>
						</view>
						<u-collapse :border="false">
							<u-collapse-item title="CPS通用计划" icon="tags">
								<view class="setting">
									<button size="mini" @click="getCpsInfo(item1)" v-if="current == 0"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">设置CPS</button>
									<button size="mini" @click="tongbuDouButCps(item1)" v-if="current == 0"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">同步抖音CPS</button>
									<button size="mini" @click="qjt(item1,0)"
										v-if="item1.cps && (item1.cps.status == 1 || item1.cps.status == 2)"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">启用CPS</button>
									<button size="mini" @click="qjt(item1,1)"
										v-if="item1.cps && (item1.cps.status == 0 || item1.cps.status == 2)"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">禁用CPS</button>
									<button size="mini" @click="qjt(item1,2)" v-if="item1.cps && item1.cps.status != 2"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">停用CPS</button>
									<button size="mini" v-if="item1.cps && item1.cps.status == 2">已停用CPS</button>
								</view>
							</u-collapse-item>
						</u-collapse>
						<u-collapse :border="false">
							<u-collapse-item title="操作" name="Docs guide" icon="setting">
								<view class="setting">
									<button size="mini" @click="edit(item1)"
										v-if="current == 0 && menus.includes('product/product/edit')"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">编辑</button>
									<button size="mini"
										v-if="current == 0 && menus.includes('product/product/dy_product_save') && (item1.audit==null || item1.audit.status == 2)"
										style=" background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;"
										@click="operate(item1.id,item1.is_product_examine,1)">同步抖音</button>

									<button size="mini"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;"
										@click="operate(item1.id,item1.is_product_examine,2)"
										v-if="item1.sj_status == 2 && menus.includes('product/product/set_dy_product_status')">上架</button>
									<button size="mini"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;"
										@click="operate(item1.id,item1.is_product_examine,3)"
										v-if="(current == 2|| item1.sj_status == 1) && menus.includes('product/product/set_dy_product_status')">下架</button>
									<button size="mini" @click="deleteProduct(item1.id)"
										v-if="(item1.sj_status == 2 || item1.sync_status == 0) && menus.includes('product/product/delete')"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">删除</button>
									<button size="mini" @click="copyProduct(item1)"
										style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">复制</button>
								</view>
							</u-collapse-item>
						</u-collapse>
					</view>
				</view>
			</view>
			<view v-if="list.length==0" class="np f-c-c">
				<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
				<view class="f12 cb mt20">暂无商品</view>
			</view>
		</scroll-view>
		<!-- </view> -->
		<u-modal :show="tongbuShow" title="提示" :content='content' @confirm="tongbudy" showCancelButton
			:closeOnClickOverlay="true" @close="close" @cancel="close"></u-modal>
		<u-popup :show="popupShow" :round="10" @close="popupShow=false" closeOnClickOverlay>
			<view class="cpsPopup">
				<uni-forms ref="form">
					<uni-forms-item label="商品原名称:" label-width="120">
						<u--input placeholder="请输入内容" border="surround" v-model="CPSform.productname"
							disabled></u--input>
					</uni-forms-item>
					<uni-forms-item label="商品名称:" label-width="120">
						<u--input placeholder="请输入内容" border="surround" v-model="CPSform.name" disabled></u--input>
					</uni-forms-item>
					<uni-forms-item label="分佣比例:" label-width="120" required>
						<u-number-box v-model="CPSform.commission_rate" :min="0" :max="28.99" inputWidth="60"
							buttonSize="40"></u-number-box>
						<text style="font-size: 23rpx; color: red">比例为百分比（1/100）,最小不能小于1，最大不超过29</text>
					</uni-forms-item>
					<uni-forms-item label="类型:" label-width="120">
						<uni-data-checkbox v-model="CPSform.content_type" :localdata="content_type"
							@change="typeChange"></uni-data-checkbox>
					</uni-forms-item>
				</uni-forms>
				<view class="submit">
					<u-button type="primary" text="确定" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import site from '@/custom/siteroot.js'
	export default {
		props: {
			// 数据列表
			list: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				isShow: false,
				tipsShow: false,
				tongbuShow: false,
				content: '',
				triggered: true,
				//下拉刷新
				refreshing: false,
				site: site,
				//加载更多样式
				status: "loadmore",

				faultStatus: '',

				subColor: uni.getStorageSync('subject_color'),
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0, // tab标题的滚动条旧位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				arr: [], // 储存距离顶部高度的数组
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null,
				val: '',
				typeList: [{
						label: '全部商品',
						value: 0,
					},
					{
						label: '审核中',
						value: 1,
					},
					{
						label: '审核失败',
						value: 2,
					},
					{
						label: '上架中',
						value: 3,
					},
					{
						label: '下架中',
						value: 4,
					}
				],
				popupShow: false,
				CPSform: {
					commission_rate: '0.00'
				},
				content_type: [{
						text: "仅短视频",
						value: 1
					},
					{
						text: "仅直播间",
						value: 2
					},
					{
						text: "短视频和直播间",
						value: 3
					}
				],
				addAndEditSattus: '',
				dy_product_id: '',
				sync_statusList: {
					'1': {
						type: 'info',
						name: '审核中',
					},
					'2': {
						type: 'success',
						name: '审核通过',
					},
					'3': {
						type: 'warning',
						name: '审核失败',
					},
				},
				sj_statusList: {
					'1': {
						type: 'success',
						name: '上架中',
					},
					'2': {
						type: 'success',
						name: '下架中',
					},
				},
			}
		},
		computed: {
			...mapState({
				role: state => state.user.roleData || [],
				menus: state => state.menus,
			}),
		},
		mounted() {
			this.getMenuItemTop()
		},
		methods: {
			Refresh() {
				if (this.current == 1 || this.current == 2) {
					this.$emit('updatePageAndFetchData', {
						status: 1
					});
				} else {
					this.$emit('updatePageAndFetchData', {
						status: 0
					});
				}
			},
			// 设置CPS通用计划
			getCpsInfo(item) {
				uni.showLoading()
				this.beg.request({
					url: '/admin/cps.Cps/getCpsInfo',
					method: 'post',
					data: {
						product_id: item.id
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (res.data) {
							res.data.commission_rate = (res.data.commission_rate / 100).toFixed(2)
							this.CPSform = {
								...res.data
							}
							this.CPSform.productname = this.CPSform.name;
							this.CPSform.name = item.product_name;
							this.addAndEditSattus = 2
						} else {
							this.CPSform.name = item.product_name
							this.CPSform.product_id = item.id
							this.CPSform.dy_product_id = item.dy_product_id
							this.addAndEditSattus = 1
						}
						this.popupShow = true
					}
				})
			},
			typeChange(e) {
				this.CPSform.content_type = e.detail.value
			},
			submit() {
				if (this.CPSform.commission_rate < '') {
					uni.$u.toast('请填写分佣比例')
					return
				}
				if (this.CPSform.commission_rate < 1) {
					uni.$u.toast('分佣比例不能小于1')
					return
				}
				let data = {
					...this.CPSform
				}
				data.commission_rate = data.commission_rate * 100
				if (this.addAndEditSattus == 1) {
					this.beg.request({
						url: '/admin/cps.Cps/add',
						method: 'post',
						data: data
					}).then(res => {
						if (res.code == 1) {
							this.tongCpstan(data)
						}
					})
				} else {
					this.beg.request({
						url: '/admin/cps.Cps/edit',
						method: 'post',
						data: data
					}).then(res => {
						if (res.code == 1) {
							this.tongCpstan(data)
						}
					})
				}
			},
			tongCpstan(val) {
				uni.showModal({
					title: '提示',
					content: '已重新设置通用CPS，是否同步抖音?',
					success: (res) => {
						if (res.confirm) {
							this.tongbuDouCps(val);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			tongbuDouCps(val) {
				uni.showLoading()
				this.beg.request({
					url: '/admin/cps.Cps/getCpsInfo',
					method: 'post',
					data: {
						product_id: val.product_id
					}
				}).then(res => {
					uni.hideLoading()
					this.popupShow = false
					if (res.code == 1) {
						if (res.data) {
							this.tongDycps(res.data)
						}
					}
				})
			},
			tongDycps(val) {
				uni.showLoading()
				this.beg.request({
					url: '/admin/cps.Cps/sync_dy_cps',
					method: 'post',
					data: {
						id: val.id
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.$u.toast('同步成功')
					}
				})
			},
			tongbuDouButCps(item) {
				uni.showModal({
					title: '提示',
					content: '确定同步抖音CPS吗？',
					success: (res) => {
						if (res.confirm) {
							let data = {
								product_id: item.id,
							}
							this.tongbuDouCps(data)
						}
					}
				})
			},
			// 启用/禁止/停用
			qjt(val, status) {
				let name = '';
				if (status == 0) {
					name = "确定启用该CPS通用计划吗？"
				}
				if (status == 1) {
					name = "确定禁用该CPS通用计划吗？"
				}
				if (status == 2) {
					name = "确定停用该CPS通用计划吗？"
				}
				uni.showModal({
					title: '提示',
					content: name,
					success: (res) => {
						if (res.confirm) {
							this.beg.request({
								url: '/admin/cps.Cps/setCpsStatuss',
								method: 'post',
								data: {
									id: val.cps.id,
									status: status,
								}
							}).then(res => {
								if (res.code == 1) {
									uni.$u.toast(res.msg)
									setTimeout(res => {
										this.Refresh()
									}, 800)
								}
							})
						}
					}
				})
			},
			fetchData() {
				this.$emit('fetchData')
			},
			tipsShowTap(value) {
				uni.showModal({
					title: '审核失败',
					showCancel: false,
					content: value
				})
			},
			tipsShowTapping(value) {
				uni.showModal({
					title: '审核失败',
					showCancel: false,
					content: value
				})
			},
			close() {
				this.tongbuShow = false
			},
			operate(id, value, type) {
				this.id = id
				this.type = type
				this.val = value
				this.tongbuShow = true
				if (type == 1) {
					this.content = '确定同步抖音数据吗？'
				} else if (type == 2) {
					this.content = '确定上架商品吗？'
				} else if (type == 3) {
					this.content = '确定下架商品吗？'
				}
			},
			async tongbudy() {
				uni.showLoading()
				if (this.type == 1) {
					// if (this.val == 0) {
					await this.beg.request({
						url: '/admin/product.Product/dy_product_save',
						method: 'post',
						data: {
							id: this.id,
						}
					}).then(res => {
						this.tongbuShow = false
						uni.hideLoading()
						if (res.code == 1) {
							uni.$u.toast(res.msg)
							setTimeout(res => {
								this.Refresh()
							}, 800)
						}
					})
					// } 
					// else {
					// 	await this.beg.request({
					// 		url: '/admin/product.Product/platform_audit',
					// 		method: 'post',
					// 		data: {
					// 			id: this.id,
					// 		}
					// 	}).then(res => {
					// 		this.tongbuShow = false
					// 		uni.hideLoading()
					// 		if (res.code == 1) {
					// 			uni.$u.toast('操作成功')
					// 			this.fetchData()
					// 		}
					// 	})
					// }
				} else if (this.type == 2) {
					await this.beg.request({
						url: '/admin/product.Product/set_dy_product_status',
						method: 'post',
						data: {
							id: this.id,
							type: 1
						}
					}).then(res => {
						uni.hideLoading()
						this.tongbuShow = false
						if (res.code == 1) {
							uni.$u.toast(res.msg)
							setTimeout(res => {
								this.Refresh()
							}, 800)
						}
					})
				} else if (this.type == 3) {
					await this.beg.request({
						url: '/admin/product.Product/set_dy_product_status',
						method: 'post',
						data: {
							id: this.id,
							type: 2
						}
					}).then(res => {
						uni.hideLoading()
						this.tongbuShow = false
						if (res.code == 1) {
							uni.$u.toast(res.msg)
							setTimeout(res => {
								this.Refresh()
							}, 800)
						}
					})
				}

			},
			deleteProduct(id) {
				this.beg.request({
					url: '/admin/product.Product/delete',
					method: 'post',
					data: {
						id: id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						setTimeout(res => {
							this.Refresh()
						}, 800)
					}
				})
			},
			// /下拉触底方法
			async scrolltolower() {
				if (this.current == 1 || this.current == 2) {
					this.$emit('scrolltolower', {
						status: 1
					});
				} else {
					this.$emit('scrolltolower', {
						status: 0
					});
				}
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height; //右边内容高度
						resolve();
					}).exec();
				})
			},
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery().in(this);
					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
						if (!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return;
						}
						rects.forEach((rect) => {
							this.arr.push(rect.top)
							resolve();
						})
					}).exec()
				})
			},
			// 设置左边菜单的滚动状态
			async leftMenuStatus(index) {
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 123 || this.menuItemHeight == 123) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('lee-tab-item', 'menuItemHeight');
				}
				// 将菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				this.current = index;
				this.$emit('clickfl', index)
				if (this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (index == this.current) return;
				this.scrollRightTop = this.oldScrollTop;
				this.$nextTick(function() {
					this.scrollRightTop = this.arr[index];
					this.current = index;
					this.leftMenuStatus(index);
				})
			},
			// 右边菜单滚动  如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
			// async rightScroll(e) {
			// 	this.oldScrollTop = e.detail.scrollTop;
			// 	if (this.arr.length == 0) {
			// 		await this.getMenuItemTop();
			// 	}
			// 	if (this.timer) return;
			// 	if (!this.menuHeight) {
			// 		await this.getElRect('menu-scroll-view', 'menuHeight');
			// 	}
			// 	setTimeout(() => { // 节流
			// 		this.timer = null;
			// 		let scrollHeight = e.detail.scrollTop + 20;
			// 		for (let i = 0; i < this.arr.length; i++) {
			// 			let height1 = this.arr[i];
			// 			let height2 = this.arr[i + 1];
			// 			if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
			// 				this.leftMenuStatus(i);
			// 				return;
			// 			}
			// 		}
			// 	}, 10)
			// },
			inventory(v) {
				this.$emit("changeShow", true, v);
			},
			edit(item) {
				uni.navigateTo({
					url: `/pages/home/editProduct/editProduct?id=${item.id}`
				})
			},
			copyProduct(val) {
				console.log(val)
				this.beg.request({
					url: '/index.php/admin/product.Product/copy',
					method: 'post',
					data: {
						product_id: val.id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						setTimeout(res => {
							this.Refresh()
						}, 800)
					} else {
						uni.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$lee-main-color: #101010;
	$lee-left-color: #00aaff;
	$lee-tab-item-active: #c6ebff;

	.lee-wrap {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex: 1;
		height: 100%;
	}

	.lee-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.lee-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.lee-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.lee-tab-item-active {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		background: #fff;
	}

	.lee-tab-view {
		height: 100%;
	}

	.right-box {
		// background-color: rgb(250, 250, 250);
	}

	.page-view {
		background-color: #fff;
		padding: 16rpx;
	}

	.class-item {
		// margin-bottom: 30rpx;
		padding: 5rpx 5rpx;
		border-radius: 8rpx;
	}

	::v-deep .u-cell__body {
		padding: 10px 0;
	}

	.content {
		.image {
			width: 100%;
			height: 300rpx;
			border-radius: 15rpx;
		}

		.content_right {

			.content-name {
				font-size: 28rpx;
				font-weight: 700;
			}

			.content-text {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.sold_start_time {
		margin-top: 10rpx;
		font-size: 26rpx;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		margin-top: 10rpx;

		.price {
			display: flex;
			align-items: center;
			font-size: 26rpx;

			.actual_amount {
				font-size: 28rpx;
				font-weight: 600;
				color: #fc3e3b;
			}

			.origin_amount {
				font-size: 26rpx;
				color: #bebebe;
				margin-left: 10rpx;
				text-decoration: line-through;
			}
		}

		.sales_volume {
			display: flex;
			align-items: center;

			.sales_num {
				font-size: 28rpx;
				font-weight: 600;
				color: #fc3e3b;
			}
		}
	}

	.product_spec {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}


	.setting {
		display: flex;
		flex-wrap: wrap;
		flex: 2;
		justify-content: space-between;
		align-items: center;
	}

	.cpsPopup {
		width: 95%;
		margin: 40rpx auto;
	}
</style>